<template>
  <div>
    <el-table
    :data="user"
    style="width: 100%"
    :row-class-name="tableRowClassName">
      <el-table-column
        prop="name"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="idcard"
        label="身份证号">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间">
      </el-table-column>
      
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" 
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
      background
      layout="prev, pager, next,total"
      :total="total"
      :page-size="pageData.pageSize"
      @current-change="handlePage">
      </el-pagination>
    </div>
    
  </div>
  
</template>

<script>
import { delUserAdmin, getAllUser } from '@/api/user';

export default {
name:'',
components: {  },
data() {
   return {
    user:[],
    pageData:{
      page:1,
      pageSize:12,
    },
    total:0
   }
},
methods:{
  tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
    },
    handlePage(val){
    // console.log(val,'val');
      this.pageData.page = val
      this.list()
    },
    
    list(){
      getAllUser({params:{...this.pageData}}).then(data=>{
        // console.log('用户信息-------》',data);
        if(data.data.code ===1){
          this.user =data.data.data.records
          this.total =Number(data.data.data.total) 
        }else{
          this.$message.error(data.data.msg)
        }
      }).catch(err =>{
        this.$message.error('发生未知错误',err)
      })
    },
    handleDelete(userId){
      delUserAdmin({params:{userId}}).then( config =>{
        
        const {data} = config
        console.log('删除的信息',data);
        if(data.code==1){
          this.list()
          this.$message.success(data.data)
        }else{
          this.$message.error(data.msg)
        }
      }).catch(err =>{
        this.$message.error('发生未知错误',err)
      })
    }
  },
  mounted(){
    this.list()
  }
}
</script>

<style lang="less" scoped>
  .pager{
    position: absolute;
    bottom: 30px;
    // right: 20px;
    left: 50%;
  }
</style>